<template>
  <div class="center-grid">
    <div class="item item1">
      <div class="one1">
        <div class="box">
          <div id="showTime"></div>
        </div>
        <div class="bottom" @click="clockIn" :disabled="hinderClick">

          <el-button type="primary" @click="clockIn"  circle :style="{ width: '50%', height: '100%' }" v-if="isClockedIn==1">点击签到</el-button>
          <el-button type="success" @click="open1" :style="{ width: '50%', height: '100%' }" circle v-else>打卡成功</el-button>

        </div>

      </div>
      <div class="one2">
        <el-calendar>
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <p :class="data.isSelected ? 'is-selected' : ''" @click="getexport(data.day)">
              {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
            </p>
          </template>
        </el-calendar>
      </div>
    </div>
    <div class="item item2">
      <div>
        <p>当日班次：不固定时间上下班</p>

        <p>出勤统计：打卡{{nowCheck.frequency}}次，工时{{nowCheck.interval}}小时</p>
        <el-divider></el-divider>
      </div>
      <div style="height: 300px;">
        <el-steps direction="vertical" >
          <el-empty description="当日未考勤" v-if="nowCheck.checkin.signInTime == null"></el-empty>
          <el-step :title="nowCheck.checkin.signInTime" :description="getSignInStatus(nowCheck.checkin.signInStatus)"  v-if="nowCheck.checkin.signInTime != null"></el-step>
          <el-step :title="nowCheck.checkin.signOutTime" :description="getSignInStatus(nowCheck.checkin.signOutStatus)" v-if="nowCheck.checkin.signOutTime != null"></el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>
<script>
import { listTime, getTime, delTime, addTime, updateTime,listbyUId,listbyMe } from "@/api/checkingin/time";

export default {

  data(){
    return{
      isClockedIn: 1,
      form:{},
      // 阻止点击
      hinderClick:false,
      table: false,
      dialog: false,
      loading: false,
      queryParams:" ",
      nowCheck:'',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询培训列表 */
    getList() {
      this.loading = true;
      listbyMe(this.queryParams).then(response => {
        this.nowCheck = response.data
        console.log(response)

      });
    },
    getexport(time) {
      console.log(time)
      this.loading = true;
      listbyMe(time).then(response => {
        this.nowCheck = response.data
        console.log(response)

      });
    },
    updateTime() {
      let myClock = setInterval(() => {
        var date = new Date();
        //date.getDay()拿到的值是阿拉伯数字，将它换成汉字
        var week = date.getDay()
        switch (week) {
          case 1:
            week = "星期一"
            break;
          case 2:
            week = "星期二"
            break;
          case 3:
            week = "星期三"
            break;
          case 4:
            week = "星期四"
            break;
          case 5:
            week = "星期五"
            break;
          case 6:
            week = "星期六"
            break;
          case 0:
            week = "星期日"
            break;
        }
        // 时间没有在此处一次性组合完毕是为了方便在输出时美化
        // 组合年月日
        let ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        // 组合时分秒
        let hms = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

        document.getElementById("showTime").innerHTML = ymd + "&nbsp;&nbsp;" + week + "&nbsp;&nbsp; " + hms;
      }, 1000);
    },
    /*根据不用的签到状态显示*/
    getSignInStatus(status) {
      switch(status) {
        case 1:
          return '已签到';
        case 2:
          return '迟到';
        case 3:
          return '矿工';
        // 其他状态的处理
        default:
          return '未打卡';
      }
    },
    clockIn() {
      if (this.hinderClick){
        return;
      }
      // 模拟上班打卡逻辑
      addTime(this.form).then(response => {
        this.$modal.msgSuccess("打卡成功");
      });
      this.isClockedIn = 2;
      this.hinderClick = true
    },
    open1() {
      this.$message({
        message: '请勿重复打卡',
        type: 'warning'
      });
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch(_ => {});
    },
  },
  mounted() {
    // 在组件挂载后调用 updateTime 方法
    this.updateTime();
  },

}
</script>
<style>
  .center-grid{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 800px;
  }
  .item1{
    background-color: #00afff;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20% 80%;
  }
  .item2{
    /*background-color: #1ab394;*/
  }

  .one1{
    background-color: white;
  }

  .box {
    width: 50%;
    height: 100%;
    background-color: #409EFF;
    text-align: center;
    line-height: 100%;
    float: left;
  }
  .bottom {
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 100%;
    float: left;
  }
  #showTime {
    text-align: center;
    font-size: 20px;
    padding-top: 70px;
  }



</style>


